<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>筑森经营看板</title>
    <!-- 引入Vue3 -->
    <script src="./src/assets/js/vue.global.js"></script>
    <!-- 引入axios -->
    <script src="./src/assets/js/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="./src/assets/less/index.css">
</head>

<body>
    <div id="app">
        <!-- 顶部看板名及其日期筛选 -->
        <header class="dashboard-header">
            <div class="header-content">
                <h1 class="title">筑森经营看板</h1>
                <div class="date-container">
                    <span class="date-label">数据截止时间：</span>
                    <input type="date" v-model="selectedDate" class="date-picker">
                </div>
            </div>
        </header>
        <!-- 大屏内容 -->
        <main>
            <!-- 分类标题 -->
            <!-- 年度总指标 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/年度指标总览.png" alt="">
                    年度指标总览
                </div>
            </h1>
            <div class="there-box">
                <div class="left-there-box">
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number"> {{monthData.yhhje}}
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">
                            </div>
                            <div class="year-left-item-label">全口径签约<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number"> 4860
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">

                            </div>
                            <div class="year-left-item-label">净签约统计<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number"> 11005
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">

                            </div>
                            <div class="year-left-item-label">公司回款<span>(万元)</span> </div>
                        </div>
                    </div>
                    <div class="there-box-item">
                        <div class="year-left-item">
                            <h1>同比 <span class="red">12%</span></h1>
                            <div class="year-left-item-number"> {{monthData.avg_per_capita}}
                                <img class="backImage" src="/src/assets/images/底座.png" alt="">

                            </div>
                            <div class="year-left-item-label">年度人均效能<span>(万元)</span> </div>
                        </div>
                    </div>
                </div>
                <div class="center-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>年度营业收入(不含税)</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">目标(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">已完成(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
                <div class="right-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>节点收入</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">目标(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">已完成(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 市场类-签约 -->
            <h1 class="common-style">
                <div class="common-text">
                    <img class="common-img" src="/src/assets/images/市场类-签约.png" alt="">
                    市场类-签约
                </div>
                <div class="year-month">
                    <div @click="marketEditBtnType='month'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='month'}">月度</div>
                    <div @click="marketEditBtnType='year'" class="year-month-btn"
                        :class="{'active':marketEditBtnType=='year'}">年度</div>

                </div>
            </h1>
            <div class="there-box">
                <div class="center-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>统计</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number">102</div>
                            <div class="icon-label">全年目标(亿)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">全口径签约(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
                <div class="center-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>按常州市区域统计</span>
                    </div>
                    <div id="main" style="width: 100%; height: 400px;"></div>
                    <script>
                        const chart = echarts.init(document.getElementById('main'));

                        // 初始化图表结构
                        const initChart = (names, values) => {
                            const data = names.map((name, i) => ({
                                name,
                                value: values[i]
                            }));

                            const barColors = data.map((_, i) => i < 3 ? '#3fa7ff' : '#2b6d9f');

                            chart.setOption({
                                backgroundColor: '#0b1e3d',
                                grid: {
                                    top: '5%',
                                    bottom: '5%',
                                    left: 80,
                                    right: 50
                                },
                                xAxis: {
                                    type: 'value',
                                    splitLine: { show: false },
                                    axisLine: { show: false },
                                    axisTick: { show: false },
                                    axisLabel: { show: false }
                                },
                                yAxis: [
                                    {
                                        type: 'category',
                                        inverse: true,
                                        data: data.map((item, i) => `NO.${i + 1}  ${item.name}`),
                                        axisLabel: {
                                            color: '#fff',
                                            fontSize: 14,
                                            align: 'left',
                                            padding: [0, 0, 0, -60]
                                        },
                                        axisLine: { show: false },
                                        axisTick: { show: false }
                                    },
                                    {
                                        type: 'category',
                                        inverse: true,
                                        data: data.map(item => item.value.toFixed(2)),
                                        axisLabel: {
                                            color: '#fff',
                                            fontSize: 14
                                        },
                                        axisLine: { show: false },
                                        axisTick: { show: false }
                                    }
                                ],
                                series: [
                                    {
                                        type: 'bar',
                                        data: data.map((item, i) => ({
                                            value: item.value,
                                            itemStyle: {
                                                color: barColors[i]
                                            }
                                        })),
                                        barWidth: 12,
                                        showBackground: true,
                                        backgroundStyle: {
                                            color: '#1f3d68'
                                        },
                                        yAxisIndex: 0,
                                        label: { show: false }
                                    }
                                ]
                            });
                        };

                        // ✅ 模拟数据
                        const mockResponse = {
                            tags: ["xinbeiqu", "zhonglouqu", "wujinqu", "tianningqu", "jingkaiqu", "jintanqu"],
                            data: [15.28, 10.28, 9.47, 8.47, 8.47, 8.47]
                        };

                        // 映射英文 tag 为中文名
                        const nameMap = {
                            xinbeiqu: '新北区',
                            zhonglouqu: '钟楼区',
                            wujinqu: '武进区',
                            tianningqu: '天宁区',
                            jingkaiqu: '经开区',
                            jintanqu: '金坛区'
                        };

                        const names = mockResponse.tags.map(tag => nameMap[tag] || tag);
                        const values = mockResponse.data;

                        // 渲染图表
                        initChart(names, values);
                    </script>
                </div>
                <div class="right-there-box">
                    <div class="row-title">
                        <img src="/src/assets/images/标.png" alt="">
                        <span>节点收入</span>
                    </div>
                    <div class="up-down-text">同比<span>12%</span></div>
                    <div class="icon-box">
                        <div class="icon-item">
                            <img src="/src/assets/images/目标.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">目标(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/已完成.png" alt="">
                            <div class="icon-number">5561.1</div>
                            <div class="icon-label">已完成(万元)</div>
                        </div>
                        <div class="icon-item">
                            <img src="/src/assets/images/完成进度.png" alt="">
                            <div class="icon-number">22.16%</div>
                            <div class="icon-label">完成进度</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    </div>

    <script>
        // Vue应用初始化
        const { createApp, ref, onMounted, watch } = Vue;
        createApp({
            setup() {
                const baseUrl = 'http://localhost:3000';
                const selectedDate = ref(new Date().toISOString().slice(0, 10));
                const marketEditBtnType = ref('month');
                const loading = ref(false);
                const error = ref(null);
                let monthData = ref({});
                const fetchMarketData = async (type) => {
                    try {
                        loading.value = true;
                        const response = await axios.get(`${baseUrl}/interface/data/yykb/GetReportkbtj.jsp?month=${selectedDate.value}&tag=wfje,yhhje,jhy,avg_per_capita`);
                        console.log(response);
                        monthData.value = response.data.tags.reduce((acc, tag, index) => {
                            acc[tag] = response.data.data[index];
                            return acc;
                        }, {});
                        console.log(monthData.value);
                        // 数据更新逻辑...
                    } catch (err) {
                        error.value = err.message;
                    } finally {
                        loading.value = false;
                    }
                };

                onMounted(() => {
                    fetchMarketData('month');
                });

                watch(marketEditBtnType, (newVal) => {
                    fetchMarketData(newVal);
                });

                return {
                    selectedDate,
                    marketEditBtnType,
                    loading,
                    error,
                    monthData
                };
            }
        }).mount('#app');
    </script>
</body>

</html>